<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  /** 卡片标题 */
  title?: string;
  /** 是否有边框 */
  bordered?: boolean;
  /** 卡片大小 */
  size?: 'default' | 'small';
  /** 自定义类名 */
  customClass?: string;
  /** 自定义body样式 */
  bodyStyle?: Record<string, any>;
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  bordered: false,
  size: 'default',
  customClass: '',
  bodyStyle: () => ({})
});

const cardClass = computed(() => {
  return `business-card ${props.customClass}`;
});
</script>

<template>
  <ACard :title="title" :bordered="bordered" :size="size" :class="cardClass" :body-style="bodyStyle">
    <template v-if="$slots.title" #title>
      <slot name="title" />
    </template>

    <template v-if="$slots.extra" #extra>
      <slot name="extra" />
    </template>

    <template v-if="$slots.actions" #actions>
      <slot name="actions" />
    </template>

    <slot />
  </ACard>
</template>

<style scoped>
.business-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}

.business-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.ant-card-head) {
  background: transparent;
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 24px;
}

:deep(.ant-card-head-title) {
  font-weight: 600;
  color: #262626;
  font-size: 16px;
}

:deep(.ant-card-body) {
  padding: 24px;
}

:deep(.ant-card-actions) {
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

/* 暗色主题适配 */
.dark .business-card {
  border-color: #303030;
  background: #1f1f1f;
}

.dark .business-card :deep(.ant-card-head) {
  border-bottom-color: #303030;
}

.dark .business-card :deep(.ant-card-head-title) {
  color: #fff;
}

.dark .business-card :deep(.ant-card-actions) {
  border-top-color: #303030;
  background: #262626;
}
</style>
